
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>
    <script>
        window.onload = function () {
            var app4 = new Vue({
                el: '#app-4',
                methods: {
                    addpeople: function () {
                        this.people.push({name: this.username, age: this.userage, time: new Date()});
                    },
                    removeall: function () {
                        this.people = [];
                    },
                    reset: function () {
                        this.username = "";
                        this.userage = "";
                    },
                    remove: function (index) {
                        this.people.splice(index, 1);
                    }
                },
                data: {
                    username: '',
                    userage: '',
                    people: [
                        {name: 'fz', age: 20, time: new Date()},
                        {name: 'feizhen', age: 20, time: new Date()}
                    ]
                },
                filters: {
                    hhmmss: function (time) {
                        return (time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds())
                    },
                    capitalize: function (value) {
                        if (!value) return ''
                        value = value.toString()
                        return value.charAt(0).toUpperCase() + value.slice(1)
                    }
                }
            })
        }
    </script>

</head>
<body>
<div id="app-4">
    <input v-model="username"><br>
    <input v-model="userage">
    <button v-on:click="addpeople">增加</button>
    <button v-on:click="reset">重置</button>
    <button v-on:click="removeall">删除所有</button>
    <table border="1">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>添加时间</th>
            <th>操作</th>
        </tr>
        <tr v-for="(text,index) in people">
            <td>{{index+1}}</td>
            <td>{{text.name|capitalize}}</td>
            <td>{{text.age}}</td>
            <td>{{text.time|hhmmss}}</td>
            <td>
                <button v-on:click="remove(index)">删除</button>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
